<template>
  <div class='header-crumb'>
    <el-breadcrumb separator-icon='ArrowRight'>
      <template v-for='(item, index) in breadcrumbs' :key='index'>
        <el-breadcrumb-item :to='item.path'>{{ item.name }}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
  </div>
</template>

<script setup lang='ts'>
import { mapPathToBreadcrumbs } from '@/utils/map-menus'
import { useRoute } from 'vue-router'
import { useLoginStore } from '@/stores/login/index'
import { computed } from 'vue'

const route = useRoute()
const store = useLoginStore()
const breadcrumbs = computed(() => mapPathToBreadcrumbs(route.path, store.userMenus))
</script>

<style scoped lang='less'>
.header-crumb {
}
</style>
